---
title: Astro को नियमावली रूप से इंस्टॉल करें
description: 'NPM, PNPM, or Yarn के साथ Astro को नियमावली रूप से कैसे इंस्टॉल करें।'
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

यह मार्गदर्शिका आपको एक नयी Astro परियोजना को नियमावली रूप से इंस्टॉल और कॉन्फ़िगर करने के चरणों के बारे में बताएगी।

:::tip[आरंभ करने का तेज़ तरीका पसंद करेंगे?]
इसके बजाय [create astro CLI wizard](/hi/install/auto/) का प्रयास करें।
:::

#### आवश्यक निर्भरताएँ

- **Node.js** - `v18.14.1` या उससे उच्चतर।
- **टेक्स्ट एडीटर** - हम अपने [आधिकारिक Astro एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) के साथ [VS Code](https://code.visualstudio.com/) की अनुशंसा करते हैं।
- **टर्मिनल** - Astro का उपयोग उसके कमांड-लाइन इंटरफ़ेस(CLI) के माध्यम से किया जाता है।

#### इंस्टॉलेशन

यदि आप हमारे स्वचालित `create astro` CLI  का उपयोग नहीं करना चाहते हैं, तो आप नीचे दिए गए मार्गदर्शिका का पालन करके अपनी परियोजना स्वयं शुरू  कर सकते हैं।
## 1. अपनी निर्देशिका बनाएं

अपने परियोजना के नाम के साथ एक खाली निर्देशिका बनाएं और फिर उसमें नेविगेट करें।

```bash
mkdir my-astro-project
cd my-astro-project
```

एक बार जब आप अपनी नई निर्देशिका में हों, तो अपने परियोजना की `package.json` फ़ाइल बनाएं। इस प्रकार आप Astro सहित अपनी परियोजना की निर्भरताओं का प्रबंधन करेंगे। यदि आप इस फ़ाइल स्वरूप से परिचित नहीं हैं, तो एक फ़ाइल बनाने के लिए निम्न आदेश चलाएँ।

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init 
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>



## 2. एस्ट्रो इंस्टॉल करें

सबसे पहले, अपने परियोजना के अंदर Astro के परियोजना निर्भरताएँ इंस्टॉल करें।

:::note[महत्वपूर्ण टिप्पणी]

Astro को स्थानीय स्तर पर इंस्टॉल किया जाना चाहिए, वैश्विक स्तर पर नहीं। सुनिश्चित करें कि आप `npm install -g astro` `pnpm add -g astro` या `yarn add global astro` नहीं चला रहे हैं।
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

फिर, अपने `package.json` के किसी भी स्थानधारक "स्क्रिप्ट" अनुभाग को निम्नलिखित से बदलें:

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

आप Astro को शुरू करने और इसके विभिन्न कमांड चलाने के लिए बाद में मार्गदर्शिका में इन स्क्रिप्ट का उपयोग करेंगे।

## 3. अपना पहला पेज बनाएं

अपने टेक्स्ट एडिटर में, अपनी निर्देशिका में `src/pages/index.astro` पर एक नई फ़ाइल बनाएं। इस परियोजना में यह आपका पहला Astro पृष्ठ होगा।

इस मार्गदर्शिका के लिए, निम्नलिखित कोड स्निपेट (`---` डैश सहित) को अपनी नई फ़ाइल में कॉपी और पेस्ट करें:

```astro title="src/pages/index.astro"
---
// Astro में आपका स्वागत है! इन ट्रिपल-डैश कोड बाड़ के बीच सब कुछ
// आपका "अवयव फ्रंटमैटर" है। यह ब्राउज़र में कभी नहीं चलता.
console.log('यह आपके टर्मिनल में चलता है, ब्राउज़र में नहीं!');
---

<!-- नीचे आपका "अवयव टेम्पलेट" है। यह सिर्फ HTML है, लेकिन साथ ही में 
     बेहतरीन टेम्पलेट बनाने में आपकी सहायता के लिए कुछ जादू का छिड़काव किया गया है। -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. अपनी पहली स्थिर संपत्ति बनाएं

आप अपनी स्थिर संपत्तियों को संग्रहीत करने के लिए एक `public/` निर्देशिका भी बनाना चाहेंगे। Astro हमेशा इन परिसंपत्तियों को आपके अंतिम निर्माण में शामिल करेगा, ताकि आप उन्हें अपने अवयव टेम्पलेट्स के अंदर से सुरक्षित रूप से संदर्भित कर सकें।

अपने टेक्स्ट एडिटर में, `public/robots.txt` पर अपनी निर्देशिका में एक नई फ़ाइल बनाएं। `robots.txt` एक साधारण फ़ाइल है जिसमें अधिकांश साइटें Google जैसे खोज बॉट को यह बताने के लिए शामिल होंगी कि आपकी साइट का उपयोग कैसे किया जाए।

इस मार्गदर्शिका के लिए, निम्नलिखित कोड स्निपेट को अपनी नई फ़ाइल में कॉपी और पेस्ट करें:


```diff title="public/robots.txt"
# उदाहरण: सभी बॉट्स को अपनी साइट को स्कैन और अनुक्रमित करने की अनुमति दें।
# पूर्ण सिंटैक्स: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. `astro.config.mjs` बनाएं

Astro को `astro.config.mjs` का उपयोग करके कॉन्फ़िगर किया गया है। यदि आपको Astro कॉन्फ़िगर करने की आवश्यकता नहीं है तो यह फ़ाइल वैकल्पिक है, लेकिन आप इसे अभी बनाना चाह सकते हैं।

अपने परियोजना के मूल निर्देशिका (`~`) में `astro.config.mjs` बनाएं और नीचे दिए गए कोड को उसमें कॉपी करें:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

यदि आप [UI फ्रेमवर्क अवयवों](/hi/guides/framework-components/) जैसे React, Svelte, इत्यादि को शामिल करना चाहते हैं या अपने परियोजना में Tailwind or Partytown जैसे अन्य उपकरण का उपयोग करना चाहते हैं, तो यह वह जगह है जहां आप [नियमावली रूप से एकीकरण आयात और कॉन्फ़िगर](/hi/guides/integrations-guide/) करेंगे।

<ReadMore>अधिक जानकारी के लिए Astro के [API कॉन्फ़िगरेशन संदर्भ](/hi/reference/configuration-reference/) पढ़ें।</ReadMore>

## 6. TypeScript समर्थन जोड़ें

TypeScript को `tsconfig.json` का उपयोग करके कॉन्फ़िगर किया गया है। भले ही आप TypeScript कोड न लिखें, यह फ़ाइल महत्वपूर्ण है ताकि Astro और VS Code जैसे उपकरण जान सकें कि आपके परियोजना को कैसे समझा जाए। कुछ सुविधाएँ (जैसे npm package imports) `tsconfig.json` फ़ाइल के बिना संपादक में पूरी तरह से समर्थित नहीं हैं।

यदि आप TypeScript कोड लिखने का इरादा रखते हैं, तो Astro के `strict` या `strictest` टेम्पलेट का उपयोग करने की अनुशंसा की जाती है। आप [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/) पर तीन टेम्पलेट कॉन्फ़िगरेशन की देख और तुलना कर सकते हैं।

अपने परियोजना के मूल में `tsconfig.json` बनाएं और नीचे दिए गए कोड को उसमें कॉपी करें। (आप अपने TypeScript टेम्पलेट के लिए `base`, `strict` या `strictest` का उपयोग कर सकते हैं):

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

अंत में, Astro परियोजना में उपलब्ध परिवेश प्रकारों के बारे में TypeScript को बताने के लिए `src/env.d.ts` बनाएं:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>अधिक जानकारी के लिए Astro की [टाइपस्क्रिप्ट सेटअप गाइड](/hi/guides/typescript/#setup) पढ़ें।</ReadMore>

## 7. अगले कदम

यदि आपने उपरोक्त चरणों का पालन किया है, तो आपकी परियोजना निर्देशिका अब इस तरह दिखनी चाहिए:

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
- tsconfig.json
</FileTree>

बधाई हो, अब आप Astro का उपयोग करने के लिए तैयार हैं!

यदि आपने इस गाइड का पूरी तरह से पालन किया है, तो आप सीधे [चरण 2: Astro शुरू करें](/hi/install/auto/#2-astro-प्रारंभ-करें-) पर जा सकते हैं जारी रखने के लिए और पहली बार Astro चलाना सीखें।
